<template>
  <div class="bookcontiner">
    <!-- 标题栏目 -->
    <div class="booktop">
      <div class="bookback" @click="backan"><van-icon name="arrow-left" /></div>
      <div class="bookname">修改密码</div>
    </div>
    <div class="passmain">
      <van-form ref="uploadModel" @failed="onFailed">
        <van-cell-group inset>
          <van-field
            v-model="uploadForm.oldPassword"
            name="newPassword"
            :type="newPasswordVisible ? 'text' : 'password'"
            label="旧密码"
            placeholder="请输入旧密码"
            clearable
            required
            :rules="[
              { validator: requiredValidator, message: '旧密码不能为空' },
            ]"
          />
          <van-field
            v-model="uploadForm.newPassword"
            name="newPassword"
            :type="newPasswordVisible ? 'text' : 'password'"
            label="新密码"
            placeholder="请输入新密码"
            clearable
            required
            :rules="[
              { validator: requiredValidator, message: '新密码不能为空' },
            ]"
          />
          <van-field
            v-model="uploadForm.nnewPassword"
            name="nnewPassword"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            label="确认密码"
            placeholder="请输入确认密码"
            clearable
            required
            :rules="[
              { validator: requiredValidator, message: '确认密码不能为空' },
            ]"
            @input="erpassfn"
          />
        </van-cell-group>
        <div class="lc" v-if="byyshow">两次输入密码不一致，请重新输入</div>
      </van-form>
    </div>
    <div class="subox" @click="submitForm">提交</div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useUser from '@/hooks/user';
  import { updatePassword } from '@/api/user';
  const byyshow = ref(false);
  const uploadForm = ref({
    oldPassword: '',
    newPassword: '',
    nnewPassword: '',
  });
  const newPasswordVisible = ref(false); // 新密码可见性
  const confirmPasswordVisible = ref(false); // 确认密码可见性

  const erpassfn = () => {
    // 校验确认密码是否与新密码一致
    byyshow.value =
      uploadForm.value.nnewPassword !== uploadForm.value.newPassword;
  };

  // 校验输入是否为空
  const requiredValidator = (value: string) => {
    return value.trim() !== ''; // 检查去除空格后的值是否为空
  };
  const uploadModel = ref();
  const { logout } = useUser();
  const submitForm = async () => {
    try {
      // 触发表单校验
      await uploadModel.value.validate(); // 校验表单
      //   console.log('表单提交成功');
      // 执行提交逻辑

      if (!byyshow.value) {
        updatePassword({
          oldPassword: uploadForm.value.oldPassword,
          newPassword: uploadForm.value.newPassword,
        }).then((res: any) => {
          if (res.code == 200) {
            logout(); // 退出登录或注销逻辑
          }
        });
      }
    } catch (error) {
      console.error('表单校验失败', error); // 输出校验失败的错误信息
      // 这里可以处理失败后显示的提示
      const errors = error.errors; // 获取具体的错误信息
      // 可以使用一个提示组件显示错误信息，或者打印到控制台
      if (errors && errors.length) {
        console.log(
          '错误信息:',
          errors.map((e) => e.message)
        );
      }
    }
  };

  const onFailed = (errors: any) => {
    console.log('表单校验失败', errors);
  };

  import { useRouter } from 'vue-router';
  const router = useRouter();
  const backan = () => {
    router.push({
      name: 'user',
    });
  };
</script>

<style scoped>
  .bookcontiner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #5f6d7c 0%, #f4f4f4 10%);
    position: absolute;
    top: 0;
    left: 0;
  }
  .booktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    font-size: 32px;
    color: #fff;
    position: relative;
    top: 0;
    left: 0;
  }
  .bookback {
    font-size: 36px;
    color: #fff;
    position: absolute;
    left: 20px;
  }
  .passmain {
    width: 686px;
    height: auto;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto;
    padding-top: 10px;
  }
  .lc {
    text-align: center;
    color: red;
    font-size: 30px;
  }
  .subox {
    width: 685px;
    height: 80px;
    background: #7b92ac;
    border-radius: 51px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    margin: 50px auto;
  }
</style>
